<template>
  <Header class="headerbox" :navShow="true" />
  <!-- <canvasContent/> -->
  <div class="contidnex">
    <div class="bannerbox">
      <img class="dnuiwqdh2183u1u" src="../../assets/home-bg.png" alt="" />
      <div class="ndjwqhd8213uj1r4">
        <div class="oiwdj23ui1io">{{ $t('home.text1') }}</div>
        <div class="oiwdj23ui1io">{{ $t('home.text2') }}</div>
        <div class="dwqf32421e1">{{ $t('home.text3') }}</div>
        <router-link to="/content/trade" class="herr1rade1d">
          {{ $t('home.btn1') }}
        </router-link>
      </div>
    </div>
    <div class="page_wapper">
      <div class="titlebox">
        <div class="hcbjui213">
          <div class="oidjwq8yeh2iegb">{{ $t('home.Popular recommendations') }}</div>
          <div class="yhdni3uegh10py">{{ $t('home.recommendationsInfo') }}</div>
        </div>
      </div>

      <div class="sildes">
        <!-- SPX -->
        <div class="silde_item">
          <div class="item_top">
            <div class="top_left">
              <img src="@/assets/SPX.svg" alt="" />
              <p class="item_name">{{ sildList[0].zimudaima }}</p>
            </div>
            <div class="top_right">
              <div class="right_text1">
                <span class="span1" :style="{ color: sildList[0].color === 'red' ? '#f44336' : '#4caf50' }">
                  {{ sildList[0].color === 'red' ? '▼' : '▲' }} {{ sildList[0].zhangdiebaifenbi }}%
                </span>
              </div>
              <p class="right_text2" :style="{ color: sildList[0].color === 'red' ? '#f44336' : '#4caf50' }">{{
                sildList[0].zhangdieshu }}</p>
            </div>
          </div>
          <span class="text_base">{{ sildList[0].name }}</span>
          <div class="item_bottom">
            <p class="bottom_num">{{ sildList[0].close }}</p>
            <div class="echarts" :ref="el => chartRefs.SPX = el"></div>
          </div>
        </div>

        <!-- NDX -->
        <div class="silde_item">
          <div class="item_top">
            <div class="top_left">
              <img src="@/assets/NDX.svg" alt="" />
              <p class="item_name">{{ sildList[1].zimudaima }}</p>
            </div>
            <div class="top_right">
              <div class="right_text1">
                <span class="span1" :style="{ color: sildList[1].color === 'red' ? '#f44336' : '#4caf50' }">
                  {{ sildList[1].color === 'red' ? '▼' : '▲' }} {{ sildList[1].zhangdiebaifenbi }}%
                </span>
              </div>
              <p class="right_text2" :style="{ color: sildList[1].color === 'red' ? '#f44336' : '#4caf50' }">{{
                sildList[1].zhangdieshu }}</p>
            </div>
          </div>
          <span class="text_base">{{ sildList[1].name }}</span>
          <div class="item_bottom">
            <p class="bottom_num">{{ sildList[1].close }}</p>
            <div class="echarts" :ref="el => chartRefs.NDX = el"></div>
          </div>
        </div>

        <!-- DJI -->
        <div class="silde_item">
          <div class="item_top">
            <div class="top_left">
              <img src="@/assets/DJI.svg" alt="" />
              <p class="item_name">{{ sildList[2].zimudaima }}</p>
            </div>
            <div class="top_right">
              <div class="right_text1">
                <span class="span1" :style="{ color: sildList[2].color === 'red' ? '#f44336' : '#4caf50' }">
                  {{ sildList[2].color === 'red' ? '▼' : '▲' }} {{ sildList[2].zhangdiebaifenbi }}%
                </span>
              </div>
              <p class="right_text2" :style="{ color: sildList[2].color === 'red' ? '#f44336' : '#4caf50' }">{{
                sildList[2].zhangdieshu }}</p>
            </div>
          </div>
          <span class="text_base">{{ sildList[2].name }}</span>
          <div class="item_bottom">
            <p class="bottom_num">{{ sildList[2].close }}</p>
            <div class="echarts" :ref="el => chartRefs.DJI = el"></div>
          </div>
        </div>
      </div>




      <div class="titlebox">
        <div class="hcbjui213">
          <div class="oidjwq8yeh2iegb">{{ $t('home.Volatility rankings') }}</div>
          <div class="yhdni3uegh10py">{{ $t('home.recommendationsDesc') }}</div>
        </div>
      </div>
      <div class="ranking">
        <div class="recommend_left">
          <p @click="changeTab('US')" :class="{ active: activeTab === 'US' }">{{ $t('home.US') }}</p>
          <p @click="changeTab('Crypto')" :class="{ active: activeTab === 'Crypto' }">{{ $t('home.Crypto') }}</p>
          <p @click="changeTab('Global')" :class="{ active: activeTab === 'Global' }">{{ $t('home.Global') }}</p>
          <p @click="changeTab('Futures')" :class="{ active: activeTab === 'Futures' }">{{ $t('home.Futures') }}</p>
        </div>
        <div class="recommend_right">
          <div class="ranking_list_item" v-for="(item, index) in rankingList" :key="index">
            <div class="ranking1">
              <i class="iconfont icon-paiming"></i>
              <!-- <span class="ranking_num">1</span> -->
            </div>
            <div class="ranking2">
              <img src="@/assets/USAU.svg" alt="" />
              <p class="ranking_name">{{ item.name }}</p>
            </div>
            <p class="ranking3">${{ item.close }}</p>
            <p class="ranking4">+{{ item.close_zhangdieshu }}</p>
            <div class="ranking5">
              <i class="iconfont icon-quanxianfuzhi"></i>
              <span>{{ item.zhangdiebaifenbi }}%</span>
            </div>
            <div class="ranking6">
              <span class="one_text">{{ item.zimudaima }}</span>
              <span>US</span>
            </div>
          </div>
        </div>
      </div>
      <div class="titlebox">
        <div class="hcbjui213">
          <div class="oidjwq8yeh2iegb">{{ $t('home.Stock picker') }}</div>
          <!-- <div class="yhdni3uegh10py">昨天上漲的股票</div> -->
        </div>
      </div>
      <div class="ranking">
        <div class="stock_left">
          <div class="left_item" :class="[active_star === index ? `left_itemActive${index}` : '']"
            v-for="(tab, index) in star_tabs" :key="index" @click="starTabClick(tab, index)">
            <p class="circle" :class="{ circleActive: active_star === index }"></p>
            <span class="stock_name" :class="['stock_name', { stock_nameActive: active_star === index }, tab.colorClass]">
              {{ tab.name }}
            </span>
          </div>
          <div class="echarts_content"></div>
        </div>

        <div class="stock_right">
          <div v-if="active_star === 1" style="color: #ffd400e8;margin-bottom: 10px;">{{ $t('home.BaFeiTe') }}</div>
          <div class="stock_title">
            <p class="name">{{ $t('home.Symbol') }}</p>
            <p class="price">{{ $t('home.Latest price') }}</p>
            <p class="change">{{ $t('ipo.Chg%') }}</p>
            <p class="industry">{{ $t('home.Industry') }}</p>
          </div>

          <!-- 内容根据激活的索引显示 -->

          <div class="stock_content" v-for="(tab, index) in starData" :key="index">
            <div class="content_item">
              <div class="content_name">
                <p class="stock_name">{{ tab.Symbol }}</p>
                <div class="bottom_info">
                  <p class="stock_type">{{ tab.type }}</p>
                  <span class="stock_info">{{ tab.name }}</span>
                </div>
              </div>
              <p class="content_price">{{ tab.LatestPrice || '-' }}</p>
              <p class="content_change" :style="{ color: tab.Chg > 0 ? '#fe554f' : '#19ca7c' }">{{ tab.Chg ? tab.Chg + '%'
                :
                '-' }}</p>
              <p class="content_industry">{{ tab.Industry }}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="titlebox">
        <div class="hcbjui213">
          <div class="oidjwq8yeh2iegb">{{ $t('home.AI screener') }}</div>
          <!-- <div class="yhdni3uegh10py">昨天上漲的股票</div> -->
        </div>
      </div>
      <!-- AI只能选股 -->
      <div class="ai_inner">
        <div class="ai_body">
          <div class="ai-border"></div>
          <div class="ai_content">
            <div class="ai_logo">
              <div class="icon-gtp"></div>
            </div>
            <div class="ai_text">
              <p>{{ $t('home.aidesc') }}</p>
              <i class="iconfont icon-youjiantou"></i>
            </div>
          </div>
        </div>
      </div>
      <!-- 新闻资讯 -->
      <div class="titlebox newList">
        <div class="hcbjui213">
          <div class="oidjwq8yeh2iegb">{{ $t('home.News') }}</div>
        </div>
        <div class="see_more" @click="gotoNews()">
          <p>{{ $t('trade.More') }}</p>
          <i class="iconfont icon-youjiantou"></i>
        </div>
      </div>

      <!-- 新闻列表 -->
      <div class="new_list">
        <div class="list_item" @click="gotoNews(item.id)" v-for="item in newsData" :key="item.id" v-if="newsData">
          <div class="img_top">
            <img v-lazy="URL + item.image" alt="">
          </div>
          <div class="list_bottom">
            <p class="item_desc">{{ item.title }}</p>
            <span class="item_time">{{ item.publish_time }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="choose_us">
      <div class="choose_content">
        <h1 class="choose_title">{{ $t('home.Why choose Autonomy Capital') }}</h1>
        <div class="choose_list">
          <div class="list_item">
            <img v-lazy="b1" alt="">
            <div class="list_text">
              <p class="text1">{{ $t('home.Most orders filled in') }}</p>
              <span class="text2"> {{ '<14ms' }} </span>
            </div>
          </div>
          <div class="list_item">
            <img v-lazy="b2" alt="">
            <div class="list_text">
              <p class="text2">{{ $t('home.Up to 1,000,000') }}</p>
              <span class="text1"> {{ $t('home.Orders executed per second') }} </span>
            </div>
          </div>
          <div class="list_item">
            <img v-lazy="b3" alt="">
            <div class="list_text flex" style="align-items:start;">
              <p class="text2">{{ $t('home.Ultra-low') }}</p>
              <span class="text1"> {{ $t('home.Latency atacentre co-location') }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="Choose_platform">
      <div class="platform_content">
        <div class="platform_left">
          <p class="platform_title">選擇您的平臺</p>
          <span class="platform_desc">我們為客戶提供多種便捷的交易平臺，包括網頁，移動端和平板電腦。</span>
          <div class="code_img">
            <div class="img_item">
              <div class="img_code">
                <img alt="">
              </div>
              <div class="bottom_item">
                <i class="iconfont icon-pingguo"></i>
                <div class="item_right">
                  <span class="down_text">Download on the</span>
                  <span class="down_type">App Store</span>
                </div>
              </div>
            </div>
            <div class="img_item">
              <div class="img_code">
                <img alt="">
              </div>
              <div class="bottom_item">
                <i class="iconfont icon-google-play"></i>
                <div class="item_right">
                  <span class="down_text">Download on the</span>
                  <span class="down_type">App Store</span>
                </div>
              </div>
            </div>

          </div>
          <p class="bottom_text">下載最新版本的<span>Autonomy Capital App </span>，查看全球市場。</p>
        </div>

        <div class="platform_right">
          <img v-lazy="home_download" alt="">
        </div>
      </div>
    </div>
  </div>
  <homeFooter />
  <!-- 回到顶部按钮 -->
  <button v-if="showBackToTop" @click="scrollToTop" class="back_to_top_button">
    <!-- <img src="../assets/totop.svg" alt="" /> -->
    <!-- <div>{{ $t('toTop') }}</div> -->
  </button>
</template>
<script setup>
import { useI18n } from "vue-i18n"; // 从 vue-i18n 导入 useI18n
import { ref, onMounted, onUnmounted, onBeforeUnmount, nextTick, inject } from "vue";
import { useRouter } from 'vue-router'
import Header from "../../components/Header.vue"; // 引入 Header 组件
import homeFooter from "../../components/homeFooter.vue";
import { popularRecommendations, theCharts, getStar, getNewList } from '@/api/index';


// 图片
import b1 from '@/assets/b1.png'
import b2 from '@/assets/b2.png'
import b3 from '@/assets/b3.png'
import home_download from '@/assets/home_download.png'

import * as echarts from 'echarts/core'  // 核心模块

import { LineChart } from 'echarts/charts'  // 折线图

import {
  GridComponent,    // 坐标系网格组件，含 xAxis 和 yAxis 支持
  TooltipComponent, // 提示框组件
} from 'echarts/components'

import { CanvasRenderer } from 'echarts/renderers'  // Canvas 渲染器

echarts.use([
  LineChart,
  GridComponent,
  TooltipComponent,
  CanvasRenderer,
])




// import  canvasContent from "../../components/canvasContent.vue"
// 使用 Composition API 获取 i18n 实例
const { t, locale } = useI18n();

// 新闻数据
const newsData = ref([])

const URL = inject('URL')

// 选股器
const active_star = ref(0)

// 选股器页签
const star_tabs = [
  { category_id: 1, name: 'US technology stars', colorClass: 'color1' },
  { category_id: 2, name: 'US star stocks', colorClass: 'color2' },
  { category_id: 3, name: 'AI stock picking', colorClass: 'color3' },
  { category_id: 4, name: 'Buffett stock picks', colorClass: 'color4' },
]

// 选股器数据
const starData = ref([
  { Symbol: 'qq', type: 'us', name: 'trivago N.V. American Depositary Shares', LatestPrice: 1.22, Chg: '15%', Industry: 'qq' },
  { Symbol: 'ww', type: 'us', name: 'Sabre Corporation', LatestPrice: 1.44, Chg: '13%', Industry: 'ww' },
])


const activeTab = ref('US')

// DOM refs
const chartRefs = {
  SPX: ref(null),
  NDX: ref(null),
  DJI: ref(null)
}

// ECharts 实例
const chartInstances = {
  SPX: null,
  NDX: null,
  DJI: null
}



// 控制按钮显示状态
const showBackToTop = ref(false);
const rankingList = ref([]);
const sildList = ref([
  { zimudaima: '', name: "Standard & Poor's 500", zhangdiebaifenbi: '', zhangdieshu: '', close: '' },
  { zimudaima: '', name: "Dow Jones Industrial Average", zhangdiebaifenbi: '', zhangdieshu: '', close: '' },
  { zimudaima: '', name: "NASDAQ-100", zhangdiebaifenbi: '', zhangdieshu: '', close: '' }
]);


const starTabClick = (tabs, index) => {
  active_star.value = index
  switch_star({ category_id: tabs.category_id })

}

const router = useRouter()

function gotoNews(id) {
  console.log(id, '222222222');
  if (id) {
    router.push({
      path: '/content/news',
      query: {
        id: id
      }
    })
  } else {
    router.push('/content/news')
  }
}


function changeTab(tab) {
  // activeTab.value = tab

  if (tab === 'US') {
    alert('US')
    // rankingList.value = [/* US 的数据 */]

  } else if (tab === 'Crypto') {
    ElMessage.success({
      message: 'Not open yet.',
      type: 'warning',
      plain: true,
    })
    // rankingList.value = [/* Crypto 的数据 */]

  } else if (tab === 'Global') {
    ElMessage.success({
      message: 'Not open yet.',
      type: 'warning',
      plain: true,
    })
    // rankingList.value = [/* Global 的数据 */]

  } else if (tab === 'Futures') {
    ElMessage.success({
      message: 'Not open yet.',
      type: 'warning',
      plain: true,
    })
    // rankingList.value = [/* Futures 的数据 */]

  }
}




// 切换语言的方法
const changeLanguage = (lang) => {
  locale.value = lang; // 更改语言
};

// 监听滚动事件
const handleScroll = () => {
  if (window.scrollY > 100) {
    showBackToTop.value = true;
  } else {
    showBackToTop.value = false;
  }
};
// 回到顶部功能
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};

// 新闻
const get_getNewList = async (code) => {
  try {
    const res = await getNewList(code);
    if (res.code == 200) {
      return res.data;
    } else {
      console.error('返回码非200：', res.code);
      return null;
    }
  } catch (error) {
    console.error('请求异常：', error);
    return null;
  }
};

// 选股器接口
const get_star = async (code) => {
  try {
    const res = await getStar(code);
    if (res.code == 200) {
      return res.data;
    } else {
      console.error('返回码非200：', res.code);
      return null;
    }
  } catch (error) {
    console.error('请求异常：', error);
    return null;
  }
};

const get_theCharts = async () => {
  try {
    const res = await theCharts();
    if (res.code == 200) {
      res.data.forEach(el => {
        const price = el.price;
        const changePct = el.changePct;
        const previousPrice = price / (1 + changePct / 100);
        const changeAmount = price - previousPrice;
        rankingList.value.push({
          close: el.price.toFixed(2),
          name: el.stockName,
          zimudaima: el.ticker,
          close_zhangdieshu: changeAmount.toFixed(2),
          zhangdiebaifenbi: changePct.toFixed(2),
        })
      });
    } else {
      console.error('返回码非200：', res.code);
      return null;
    }
  } catch (error) {
    console.error('请求异常：', error);
    return null;
  }
};

const get_popularRecommendations = async () => {
  try {
    const res = await popularRecommendations();
    if (res.code == 200) {
      return res.data;
    } else {
      console.error('返回码非200：', res.code);
      return null;
    }
  } catch (error) {
    console.error('请求异常：', error);
    return null;
  }
};


async function initNews() {
  const newsdata = await get_getNewList();

  console.log(newsdata, 'newsdata');

  newsData.value = newsdata.data
}


async function initWidget() {
  const rawdata = await get_popularRecommendations();

  rawdata.forEach((el, i) => {
    let raw = el.items
    const closes = raw.map(x => x.close)
    const first = closes[0], last = closes.at(-1)
    const change = last - first
    const pct = change / first * 100
    const color = change >= 0 ? '#4caf50' : '#f44336'
    const alpha = change >= 0 ? 'rgba(76,175,80,0.4)' : 'rgba(244,67,54,0.4)'


    sildList.value[i].zimudaima = el.symbol
    sildList.value[i].close = last.toFixed(2)
    sildList.value[i].zhangdiebaifenbi = pct.toFixed(2) + '%'
    sildList.value[i].zhangdieshu = `${change >= 0 ? '+' : '-'}${Math.abs(change).toFixed(2)}`


    chartInstances[el.symbol] = echarts.init(chartRefs[el.symbol])
    chartInstances[el.symbol].setOption({
      grid: { left: 0, right: 0, top: 0, bottom: 0 },
      xAxis: { show: false, type: 'category', data: raw.map(x => x.date) },
      yAxis: { show: false, type: 'value' },
      series: [{
        type: 'line',
        data: closes,
        smooth: true,
        symbol: 'none',
        lineStyle: { width: 2, color },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: alpha },
              { offset: 1, color: 'rgba(255,255,255,0)' }
            ]
          }
        }
      }]
    })

  });
}


async function switch_star(code) {
  starData.value = []
  const data = await get_star(code);

  data.data.forEach((el, index) => {
    if (index <= 6) {
      starData.value.push(
        {
          Symbol: el.symbol,
          type: el.symbol,
          name: el.name,
          LatestPrice: el.price,
          Chg: el.price_change_pct,
          Industry: el.industry,
          category_id: el.category_id
        }
      )
    }
  });
}

onMounted(async () => {
  await nextTick()
  initWidget()
  get_theCharts()
  switch_star()
  initNews()
})
onBeforeUnmount(() => {
  chartInstances['SPX'].dispose()
  chartInstances['NDX'].dispose()
  chartInstances['DJI'].dispose()
})
// 组件卸载时移除滚动监听
onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
});
</script>
<style scoped lang="less">
.color1.stock_nameActive {
  color: #f19737 !important;
}

.color2.stock_nameActive {
  color: #6647b7 !important;
}

.color3.stock_nameActive {
  color: #515cad !important;
}

.color4.stock_nameActive {
  color: #f7d04c !important;
}

.left_itemActive0 {
  border: 1px solid #f19737 !important;
}

.left_itemActive1 {
  border: 1px solid #6647b7 !important;
}

.left_itemActive2 {
  border: 1px solid #515cad !important;
}

.left_itemActive3 {
  border: 1px solid #f7d04c !important;
}

.contidnex {
  border-color: #18191e;
  min-width: 1200px;
  background-color: #18191e;

  .bannerbox {
    // width: 100vw;
    position: relative;

    .dnuiwqdh2183u1u {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }

    .ndjwqhd8213uj1r4 {
      position: absolute;
      width: 1200px;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%) !important;
      transform: translate(-50%, -50%) !important;

      .oiwdj23ui1io {
        font-weight: 700;
        font-size: 40px;
        margin-bottom: 10px;
        color: #fde70a;
      }

      .dwqf32421e1 {
        font-size: 23px;
        color: #fff;
        margin-bottom: 30px;
      }

      .herr1rade1d {
        width: 135px;
        height: 46px;
        border: 1px #fff solid;
        border-radius: 5px;
        color: #fff;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
    }
  }

  .page_wapper {
    width: 1200px;
    margin: 0 auto;

    .titlebox {
      width: 100%;
      margin: 30px 0;

      .hcbjui213 {
        color: #fff;
        font-size: 34px;

        .oidjwq8yeh2iegb {
          padding-left: 20px;
          position: relative;
        }

        .yhdni3uegh10py {
          padding-left: 20px;
          font-size: 16px;
          color: #a4a5a7;
        }

        .oidjwq8yeh2iegb:before {
          position: absolute;
          top: 9px;
          bottom: 9px;
          width: 8px;
          left: 0;
          content: "";
          background: #f7d04c;
        }
      }
    }

    .newList {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .see_more {
        font-size: 16px;
        color: #fff;
        cursor: pointer;
        opacity: .7;
        display: flex;
        align-items: center;

        .icon-youjiantou {
          margin-left: 5px;
          font-size: 14px;
        }
      }
    }

    .sildes {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .silde_item {
        // width:30%;
        width: 400px;
        height: 180px;
        border-radius: 5px;
        margin: 0 10px;
        padding: 15px;
        background-color: #202b2c;

        .item_top {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .top_left {
            display: flex;
            align-items: center;

            img {
              width: 25px;
              height: 25px;
              border-radius: 50%;
              margin-right: 10px;
            }

            .item_name {
              font-size: 22px;
              font-weight: 700;
              color: #fff;
            }
          }

          .top_right {
            display: flex;
            flex-direction: column;
            align-items: end;

            .right_text1 {
              .icon-xiajiang {
                color: #fe554f;
                font-size: 14px;
              }

              .span1 {
                font-size: 16px;
                font-weight: 700;
              }
            }

            .right_text2 {
              font-weight: 700;
              color: #fe554f;
            }
          }
        }

        .text_base {
          color: #fff;
          opacity: 0.6;
          font-weight: 700;
          font-size: 16px;
          display: inline-block;
          margin-top: 10px;
          margin-bottom: 15px;
        }

        .item_bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .bottom_num {
            font-weight: 700;
            font-size: 24px;
            margin-top: 10px;
            color: #fff;
          }

          .echarts {
            width: 180px;
            height: 50px;
          }
        }
      }
    }

    .ranking {
      width: 100%;
      display: flex;
      //   align-items: center;
      justify-content: space-between;

      .recommend_left {
        width: 300px;
        display: flex;
        flex-direction: column;
        margin-right: 15px;

        p {
          cursor: pointer;
          border-radius: 5px;
          padding: 20px 0;
          margin-bottom: 10px;
          text-align: center;
          font-size: 14px;
          color: #fff;
          font-weight: 700;
        }

        p.active {
          background-color: #589cf8;
        }

        p:hover {
          background-color: rgba(88, 156, 248, 0.2);
        }
      }

      .recommend_right {
        flex: 1;
        display: flex;
        flex-direction: column;

        .ranking_list_item:hover {
          background-color: rgba(88, 156, 248, 0.2);
        }

        .ranking_list_item {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: 700;
          cursor: pointer;
          border-radius: 5px;
          padding: 15px 30px 15px 15px;
          margin-bottom: 10px;
          background-color: #202b2c;

          .ranking1 {
            display: flex;
            align-items: center;
            // position: relative;
            width: 20px;
            margin-right: 15px;

            .icon-paiming {
              // width:24px;
              // height:31px;
              font-size: 24px;
              margin-right: 15px;
              //   position: absolute;
              //   top: 0;
              //   left: 0;
              color: #f2cc52;
            }

            .ranking_num {
              position: absolute;
              top: 0;
              left: 0;
              color: #fff;
            }
          }

          .ranking2 {
            display: flex;
            align-items: center;

            img {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              margin-right: 10px;
            }

            .ranking_name {
              width: 200px;
              font-size: 16px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              color: #fff;
            }
          }

          .ranking3 {
            width: 15%;
            font-size: 18px;
            color: #fff;
            text-align: right;
          }

          .ranking4 {
            width: 15%;
            font-size: 18px;
            color: rgb(25, 202, 124);
            text-align: right;
          }

          .ranking5 {
            width: 15%;
            font-size: 18px;
            color: rgb(25, 202, 124);
            text-align: right;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .icon-quanxianfuzhi {
              margin-right: 5px;
            }
          }

          .ranking6 {
            width: 15%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            font-size: 18px;
            color: #fff;
            opacity: 0.7;

            .one_text {
              margin-right: 10px;
            }
          }
        }
      }

      .stock_left {
        width: 300px;
        background-color: #202b2c;
        padding: 15px;
        margin-right: 15px;
        border-radius: 5px;

        .left_item {
          display: flex;
          align-items: center;
          cursor: pointer;
          margin-bottom: 10px;
          border-radius: 10px;
          border: 1px solid #3c3e47;
          padding: 10px 30px 10px 15px;
          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

          .circle {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: hsla(0, 0%, 100%, 0.7);
            margin-right: 10px;
          }

          .circleActive {
            background-color: rgb(241, 151, 55);
          }

          .stock_name {
            color: hsla(0, 0%, 100%, 0.7);
            font-size: 16px;
          }

          // .stock_nameActive {
          //   color: rgb(241, 151, 55);
          // }
        }



        .echarts_content {
          width: 100%;
          height: 300px;
        }
      }

      .stock_right {
        flex: 1;

        .stock_title {
          width: 100%;
          display: flex;
          align-items: center;
          color: #fff;
          opacity: 0.5;
          font-size: 16px;
          padding: 0 15px;
          box-sizing: border-box;
          margin-bottom: 10px;

          .name {
            width: 30%;
          }

          .price {
            width: 20%;
            text-align: center;
          }

          .change {
            width: 25%;
            text-align: center;
          }

          .industry {
            width: 25%;
            text-align: right;
          }
        }

        .stock_content {
          width: 100%;
          display: flex;
          align-items: center;
          flex-direction: column;
          //   padding:0 15px;
          box-sizing: border-box;


          .content_item {
            width: 100%;
            display: flex;
            align-items: center;
            padding: 15px;
            font-weight: 700;

            .content_name {
              width: 30%;

              .stock_name {
                color: #fff;
                margin-bottom: 5px;
                cursor: pointer;
                font-size: 17px;
              }

              .bottom_info {
                display: flex;
                align-items: center;

                .stock_type {
                  background-color: rgba(0, 123, 255, 0.1);
                  color: #007bff;
                  border-radius: 3px;
                  font-size: 10px;
                  padding: 2px 5px;
                  border: 1px solid rgba(0, 123, 255, 0.1);
                  box-sizing: border-box;
                  border: none;
                  font-style: normal;
                  margin-right: 5px;
                }

                .stock_info {
                  color: #fff;
                  opacity: 0.6;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  font-size: 14px;
                }
              }
            }

            .content_price {
              width: 20%;
              text-align: center;
              font-size: 17px;
              color: #fff;
            }

            .content_change {
              width: 25%;
              font-size: 17px;
              text-align: center;
            }



            .change_green {
              color: rgb(25, 202, 124);
            }

            .content_industry {
              width: 25%;
              text-align: right;
              font-size: 17px;
              color: #fff;

              display: -webkit-box;
              /* 必须要有，开启多行省略 */
              -webkit-line-clamp: 2;
              /* 限制最多2行 */
              -webkit-box-orient: vertical;
              /* 必须配合 */
              overflow: hidden;
              /* 必须配合 */
              text-overflow: ellipsis;
              /* 可选，兼容性辅助 */
            }
          }
        }

        .content_item:hover {
          background-color: rgba(88, 156, 248, 0.2);
        }
      }
    }

    .ai_inner {
      border-radius: 10px;
      background-color: #202b2c;

      .ai_body {
        border-radius: 10px;
        padding: 30px 0;
        margin-top: 30px;
        background-color: #18191e;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(90deg, #00bce6, #2962ff 50.31%, #d500f9);
        content: "";
        position: relative;
        padding: 3px;
        border-radius: 10px;

        .ai-border {
          backface-visibility: hidden;
          -webkit-filter: blur(10px);
          filter: blur(10px);
          height: 110%;
          left: -7%;
          position: absolute;
          top: -5%;
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          width: 100%;
          will-change: transform;
          // background: url(https://macogroupmex.com/app/static/replace/common/ai-gpt.png) 50% no-repeat;
          // background-size: cover;
        }

        .ai_content {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #18191e;
          border-radius: 10px;

          .ai_logo {
            cursor: pointer;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 50px;

            .icon-gtp {
              width: 150px;
              height: 150px;
              background: url(@/assets/ai-gpt.png) 50% no-repeat;
              background-size: cover;
              box-sizing: border-box;
              cursor: pointer;
            }
          }

          .ai_text {
            display: flex;
            align-items: center;
            cursor: pointer;
            font-weight: 700;
            color: #fff;

            p {
              font-size: 25px;
              margin-right: 5px;
            }

            .icon-youjiantou {
              font-size: 16px;
            }
          }
        }
      }
    }

    .new_list {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      // white-space: wrap;
      flex-flow: wrap;

      .list_item {
        width: 360px;
        cursor: pointer;
        border-radius: 10px;
        margin-bottom: 50px;
        padding: 15px;
        background-color: #202b2c;

        .img_top {
          height: 200px;
          border-radius: 5px;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
            border-radius: 5px;
            transition: all .5s;
          }

          img:hover {
            transform: scale(1.1);
          }

        }

        .list_bottom {
          width: 100%;
          display: flex;
          flex-direction: column;
          margin-top: 15px;

          .item_desc {
            height: 50px;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            display: -webkit-box;
            white-space: normal;
            word-break: break-all;
            font-weight: 700;
            font-size: 20px;
            color: #fff;
            line-height: 25px;
          }

          .item_time {
            margin-top: 5px;
            color: #fff;
            opacity: .7;
            font-size: 14px;
            font-weight: 700;

          }
        }
      }
    }
  }

  .choose_us {
    width: 100%;
    height: 504px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(@/assets/choose-bg.png) 50% no-repeat;
    background-size: cover;

    .choose_content {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .choose_title {
        padding: 50px 0;
        font-weight: 700;
        text-align: center;
        width: 100%;
        font-size: 34px;
        color: #fff;
      }

      .choose_list {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 50px;
        padding-bottom: 100px;

        .list_item {
          width: 30%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          img {
            width: 120px;
            height: 120px;
          }

          .list_text {
            width: 100%;
            height: 80px;
            text-align: center;
            margin-top: 15px;

            .text1 {
              color: #fff;
              font-size: 24px;
            }

            .text2 {
              color: #589cf8;
              font-size: 24px;
              white-space: nowrap;
            }
          }

          .flex {
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }
    }
  }

  .Choose_platform {
    width: 100%;
    height: 582px;
    width: 100%;
    height: 100%;
    background: url(@/assets/download-bg.png) 50% no-repeat;
    background-size: cover;

    .platform_content {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      padding: 50px 0;

      .platform_left {
        flex: 1;
        display: flex;
        flex-direction: column;

        .platform_title {
          font-size: 40px;
          margin-bottom: 25px;
          color: #fff;
        }

        .platform_desc {
          font-size: 22px;
          color: #fff;
          padding-bottom: 50px;
        }

        .code_img {
          width: 100%;
          display: flex;
          align-items: center;

          .img_item:first-child {
            margin-right: 25px;
          }

          .img_item {
            display: flex;
            flex-direction: column;
            align-items: center;

            .img_code {
              width: 140px;
              height: 120px;
              border-radius: 10px;
              border: 1px solid #3c3e47;
              padding: 10px;
              margin-bottom: 10px;
              background-color: #fff;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .bottom_item {
              width: 180px;
              border: 2px solid #fff;
              border-radius: 10px;
              display: flex;
              align-items: center;
              padding: 10px 15px;

              .iconfont {
                color: #fff;
                font-size: 25px;
              }

              .item_right {
                display: flex;
                flex-direction: column;
                color: #fff;
                font-weight: 700;
                padding-left: 15px;

                .down_text {
                  font-size: 12px;
                }

                .down_type {
                  font-size: 18px;
                }
              }
            }
          }

        }

        .bottom_text {
          padding-top: 50px;
          color: #fff;
          font-size: 14px;

          span {
            color: #3c9eff;
            margin-left: 5px;
            display: inline-block;
          }
        }
      }

      .platform_right {
        width: 646px;
        height: 411px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
